<template>
	<view>
		<image :src="xieyi" mode="widthFix" @tap.stop="previewImage"></image>
		<view class=""
			style="display: flex;justify-content: center;height: 100rpx;background-color: #fff;border:1rpx solid #c2c4c4;border-radius: 10rpx;margin: 20rpx auto;width: 80%;">
			<image v-for="item in ser" :src="item" mode="widthFix" style="width: 40px;height: 40px;"></image>
		</view>
		<canvas class="canvasImg" id="designature2" style="display: none;"></canvas>
		<f-signature ref="canvassss"></f-signature>
		<view class="qianming_bottom">
			<view class="anniu" style="background-color: #A40B0B;color: #fff;" @click="save">保存签名</view>
			<view class="anniu" @click="remove">重写</view>
			<view class="anniu" @click="next">下一个</view>
		</view>

		<view class="placeholder"></view>
	</view>
</template>
<script>
	import fSignature from '@/node_modules/f-signature/components/f-signature/f-signature.vue';
	import {
		commission_qrcode_xieyi,
		commission_qrcode_getXieyiInfo
	} from "@/api/home.js"
	export default {
		components: {
			fSignature
		},
		data() {
			return {
				ctx: '',
				ctx2: '',
				qian: '',
				ser: [],
				openid: '',
				pageWidth: '',
				pageHeight: '',
				xieyi: ''
			}
		},
		onLoad() {
			const ctx = uni.createCanvasContext('designature2', this)
			const ctx2 = uni.createCanvasContext('myCanvas2', this)
			this.ctx = ctx;
			this.ctx2 = ctx2;
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.commission_qrcode_getXieyiInfoFun();
				},
				fail: () => {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			});
			this.getPageSize();
		},
		onShow() {},
		methods: {
			async commission_qrcode_getXieyiInfoFun() {
				let data = await commission_qrcode_getXieyiInfo(this.openid);
				this.xieyi = data.img;
				console.log(data);
				if (data.error == 1) {
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/home/home'
						})
					}, 1500)
				}
			},
			previewImage(e) {
				uni.previewImage({
					urls: [this.xieyi],

				})
			},
			getPageSize() {
				const systemInfo = uni.getSystemInfoSync()
				this.pageWidth = systemInfo.windowWidth;
				this.pageHeight = systemInfo.windowHeight;
			},
			async commission_qrcode_xieyiFun(url) {
				let up = {
					openid: this.openid,
					qianming: url,
					hetong: this.xieyi
				}
				let data = await commission_qrcode_xieyi(up);

				if (data.error === 1) {
					return
				} else {
					uni.setStorageSync('qianming', data.img);
					if (data.error === 0) {
						this.xieyi = data.img
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}
				}

			},
			rotate(e) {
				this.ser.push(e);
			},
			next() {
				var e = this.$refs.canvassss.save()
				if (this.ser.length > 3) {
					this.showinteraction('签名最多4个字')
					return
				}
				e.then(res => {
					console.log(res);
					this.ser.push(res)
				})

			},
			save() {
				console.log(this.ser.length);
				if (this.ser.length >= 2) {
					this.draw()
				} else {
					this.showinteraction('请先签名');
				}
			},
			remove() {
				this.ser = [];
				var e = this.$refs.canvassss.clear()
				this.qian = ''
			},

			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
			async draw() {
				var _this = this
				const image1 = await this.getImageInfo('/static/xieyi/xieyi3.png');
				this.ctx.drawImage(image1.path, 0, 0, 200, 310);
				if (this.ser.length <= 1) {
					_this.showinteraction('请核实姓名是否有误');
				}
				for (var i = 0; i < this.ser.length; i++) {
					const image2 = await this.getImageInfo(this.ser[i])
					this.ctx.drawImage(image2.path, this.pageWidth / 4 * i, 120, 80, 200);
				}
				var that = this;
				this.ctx.draw(false, () => {
					// 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中
					let w = this.pageWidth * _this.ser.length;
					uni.canvasToTempFilePath({
						width: w,
						height: _this.pageHeight / 2,
						destWidth: w,
						destHeight: 300,
						quality: 1,
						canvasId: 'designature2',
						fileType: 'png',
						success(res2) {
							console.log(res2.tempFilePath);
							_this.qian = res2.tempFilePath
							_this.up_img(_this.qian)
						}
					}, that)
				});
			},
			getImageInfo(src) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src,
						success: res => {
							console.log(res, '123');
							resolve(res)
						},
						fail: err => {
							reject(err)
						}
					})
				})

			},
			up_img(url) {
				console.log(url, '---------------');
				var _this = this
				uni.uploadFile({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
					//仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (res) => {
						var url = JSON.parse(res.data).url;
						this.commission_qrcode_xieyiFun(url);
						this.showinteraction('签名完成');

					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	image {
		width: 100vw;
		/* height: 100vh; */
	}

	.qianming_bottom {
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-around;
		margin: 30rpx 0;
		font-size: 30rpx;
		padding: 0 30rpx;

		.anniu {
			width: 30%;
			height: 100%;
			background-color: #ebe9e9;
			text-align: center;
			line-height: 70rpx;
			border-radius: 70rpx;
		}
	}

	.placeholder {
		height: 30rpx;
	}
</style>